<template>
  <div id="msite">
    <!-- 首页头部 -->
    <HeaderTop title="地址">
      <span
        class="header_login"
        slot="left"
      >
        <span class="header_login_text">精选</span>
      </span>

      <span
        class="header_bars"
        slot="right"
      >
        <router-link to="/channel">
          <i class="icon icon-bars"></i>
        </router-link>

      </span>
    </HeaderTop>
    <!-- 首页第二部分 -->
    <HeaderBottom>
      <span
        class="header_search"
        slot="left"
      >
        <i
          class="icon icon-search"
          @click="goSearch()"
        ></i>
      </span>
      <span
        class="header_text"
        slot="right"
      >
        <div
          class="swiper-container"
          id="swiper-container1"
        >
          <div
            class="swiper-wrapper"
            @click="goSearch()"
          >
            <div class="swiper-slide">
              <p>段奥娟 虔诚 [热点]</p>
            </div>
            <div class="swiper-slide">
              <p>李现“戏精”附体 [热门]</p>
            </div>
            <div class="swiper-slide">
              <p>养父的花样年华 [热门]</p>
            </div>
            <div class="swiper-slide">
              <p>迪迦奥特曼 [热点]</p>
            </div>
            <div class="swiper-slide">
              <p>冰雪奇缘2 [热门]</p>
            </div>
          </div>
        </div>
      </span>
    </HeaderBottom>
    <mt-swipe
      :auto="2000"
      :showIndicators="false"
      class="swiper"
    >
      <mt-swipe-item
        class="item"
        v-for="(item,index) in imgList"
        :key="index"
      >
        <div class="div">
          <img
            :src="item.imgSrc"
            alt=""
          >
          <p>{{item.imgP}}</p>
        </div>
      </mt-swipe-item>
    </mt-swipe>
    <Loading></Loading>
    <!-- 其他 -->
    <div id="qita">

    </div>
  </div>
</template>

<script>

import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
import HeaderBottom from '../../components/HeaderTop/HeaderBottom.vue'
import Loading from '../../components/Loading/Loading.vue'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  data () {
    return {
      imgList: [
        {
          imgSrc: require('./images/1.png'),
          imgP: '【年度个人观影报告】2020你的观影习惯都在这里'
        },
        {
          imgSrc: require('./images/2.png'),
          imgP: '【庆余年】肖战上线！ 终于等到你小言公子'
        },
        {
          imgSrc: require('./images/3.png'),
          imgP: '腾讯天美首款战争策略手游'
        },
        {
          imgSrc: require('./images/4.png'),
          imgP: '百事2020把乐带回家--家有一宝'
        }
      ]
    }
  },
  methods: {
    goSearch () {
      this.$router.push({
        name: 'search' // 跳转到的路径名称
      })
    },
    goChannel () {
      this.$router.push({
        name: 'channel' // 跳转到的路径名称
      })
    }
  },
  components: {
    HeaderTop,
    HeaderBottom,
    Loading
  },
  mounted () {
    // 创建一个swiper实例对象，来实现轮播

    new Swiper('#swiper-container1', {// eslint-disable-line
      pagination: {
        el: '.swiper-pagination1',
        clickable: true
      },
      autoplay: {
        delay: 1500,
        disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay。默认为true：停止
      },
      loop: true,
      direction: 'vertical'
    })
  }
}
</script>

<style scoped>
#qita {
  width: 100%;
  height: 150px;
}
#msite {
  width: 100%;
  overflow: hidden;
}
.header_bars {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10%;
  height: 50%;
}
.header_bars .icon {
  font-size: 24px;
  color: black;
}
.header_title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  color: black;
  text-align: center;
  margin-left: -5%;
}
.header_title .header_title_text {
  font-size: 20px;
  color: black;
  display: block;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header_login {
  font-size: 14px;
  color: black;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}
.header_login_text {
  font: bold;
  font-size: 20px;
  color: black;
}

.header_search {
  position: absolute;
  left: 1px;
  top: 50%;
  transform: translateY(-50%);
  width: 10%;
  height: 80%;
  background: white;
}
.header_search .icon {
  font-size: 25px;
}
.header_text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  color: black;
  padding-top: 15px;
  margin-left: -20%;
}
/* 轮播图 */
.swiper {
  width: 100%;
  height: 245px;
  margin-top: 100px;
  border: 1px solid rgb(211, 208, 208);
}
.item p {
  text-align: center;
  font-size: 5px;
  font-weight: bold;
  line-height: 30px;
}
.item img {
  margin-top: -10px;
  width: 100%;
  height: 100%;
}
/* swiper轮播 */
.swiper-container {
  width: 100%;
  height: 50px;
}
#swiper-container1 {
  width: 150px;
  height: 45px;
  margin-left: 20px;
  margin-top: -15px;
}
.swiper-slide {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
</style>
